<template>
  <el-card class="sale-view">
    <template v-slot:header>
      <div class="sale-header">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">销售额</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>

        <div class="right">
          <el-radio-group v-model="radioSelect" size="small">
            <el-radio-button label="今日" ></el-radio-button>
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="今年"></el-radio-button>
          </el-radio-group>

          <el-date-picker
            size="small"
            value-format="yyyy-MM-dd"
            v-model="dates"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </div>
    </template>

    <div class="chart-wrap">
      <!-- <div class="chart">图表</div> -->
      <v-chart :options="getOptions()" class="chart" autoresize></v-chart>
      <div class="list-wrap">
        <div class="title">门店{{activeIndex==='1' ? '销售额' : '访问量'}}排名</div>
        <div class="list">
          <div class="item" v-for="item in rankData" :key="item.no">
            <div class="no" :class="{top: item.no<4}">{{item.no}}</div>
            <div class="name">{{item.name}}</div>
            <div class="count">{{item.count}}</div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'SaleView',
  data () {
    return {
      activeIndex: '1',
      radioSelect: '本周',
      dates: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },

  /* 
    "orderFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    "orderFullYear": [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
    "userFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    "userFullYear": [110, 120, 90, 220, 175, 212, 192, 95, 88, 120, 250, 310],
    "orderRank": [
      {
      "no": 1,
      "name": "肯德基",
      "count": "323,234"
    }]
    "userRank": [
      {
      "no": 1,
      "name": "麦当劳",
      "count": "211,335"
    }]

  */

  computed: {
    ...mapState({
      orderFullYearAxis: state => state.data.reportData.orderFullYearAxis,
      orderFullYear: state => state.data.reportData.orderFullYear,
      userFullYearAxis: state => state.data.reportData.userFullYearAxis,
      userFullYear: state => state.data.reportData.userFullYear,
      orderRank: state => state.data.reportData.orderRank,
      userRank: state => state.data.reportData.userRank,
    }),

    rankData () {
      return this.activeIndex==='1' ? this.orderRank : this.userRank
    }
  },

  methods: {
    handleSelect (value) {
      this.activeIndex = value
    },

    /* 
    得到柱状图的配置对象
    */
    getOptions () {

      const text = this.activeIndex==='1' ? '销售额趋势' : '访问量趋势'
      const xAxisData = this.activeIndex==='1' ? this.orderFullYearAxis : this.userFullYearAxis
      const data = this.activeIndex==='1' ? this.orderFullYear : this.userFullYear


      return {
        // 标题
        title: {
          text,
          left: 15,
          textStyle: {
            fontSize: 14
          }
        },
        // x轴
        xAxis: {
          data: xAxisData,
          axisTick: { // 刻度线在柱形图的中间
            alignWithLabel: true
          }
        },
        // y轴
        yAxis: {
          // show: false  // 不可以
          axisLine: { // y轴线不显示
            show: false
          },
          axisTick: { // y轴刻度线不显示
            show: false
          },
          splitLine: { // 分隔线
            lineStyle: {
              color: '#ddd',
              type: 'dotted'
            }
          }
        },

        // 系列
        series: [
          {
            type: 'bar',
            data,
            barWidth: '40%'
          }
        ],

        // 提示
        tooltip: {

        },

        // 网格
        grid: {
          left: 50,
          top: 50,
          right: 50,
          bottom: 50,
        },

        // 颜色
        color: '#3398DB'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .sale-view {
    margin-top: 20px;

    ::v-deep.el-card__header { // 子组件内部样式 => 使用深度作用域选择器
      border-bottom: none;
      padding: 0;
    }
    .sale-header {
      margin: 0 20px;
      position: relative;
      /* 不可以, 这样会导致底部的分隔线太短 */
      // display: flex;       
      // align-items: center;
      // justify-content: space-between;
      .right {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        .el-date-editor {
          margin-left: 20px;
        }
      }
    }

    .chart-wrap {
      display: flex;
      height: 270px;
      .chart {
        flex: 5;
        margin-right: 20px;
      }
      .list-wrap {
        flex: 2;
      }
    }

    .list-wrap {
      .title {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 500;
      }
      .list {
        margin-top: 20px;
        .item {
          display: flex;
          margin: 6px 20px 6px 0;
          font-size: 14px;
          .no {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            &.top {
              border-radius: 20px;
              background: #000;
              color: white;
            }
          }
          .name {
            margin-left: 10px;
          }
          .count {
            flex: 1;
            text-align: right;
          }
        }
      }
    }
  }
</style>
